<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="router.back()" />
    <van-tabs v-model:active="active">
      <van-tab title="全部" name="5"></van-tab>
      <van-tab title="未付款" name="0"></van-tab>
      <van-tab title="待发货" name="1"></van-tab>
      <van-tab title="待送达" name="2"></van-tab>
      <van-tab title="待完成" name="3"></van-tab>
      <van-tab title="已完成" name="4"></van-tab>
    </van-tabs>
    <van-card v-for="item in userStore.OrderList" :key="item._id" :num="item.goodsNumber" :price="item.price"  :title="item.goodsName"
      :thumb="item.goodsthumb" v-show="active == 5? true : item.statu == active? true : false">
      <template #tags>
        <van-tag plain type="primary">{{ orderStatu[item.statu] }}</van-tag>
      </template>

      <template #footer>
        <van-button @click="upStatu(item._id,item.statu)" size="small" v-show="butStatu[item.statu]">{{ butStatu[item.statu] }}</van-button>
      </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">
import { postOrderDate } from '../api';
import { useUserStore } from '../store';

// 声明实例
const router = useRouter();
const userStore = useUserStore();
// 声明响应式变量
let active = ref();
// 声明数组
let orderStatu = [
  "未付款",
  "待发货",
  "待送达",
  "待完成",
  "已完成"
]
let butStatu = [
  "付款",
  "",
  "",
  "确认收货",
  ""
]

userStore.getOrderList();

let upStatu = async (_id:string,statu: number)=>{
  statu++;
  let result = await postOrderDate({
    status: "change",
    _id: _id,
    statu: statu
  })
  userStore.getOrderList();
}

</script>

<style scoped></style>
